<template>
  <div class="permissions-container">
    <el-card class="permissions-card">
      <template #header>
        <div class="card-header">
          <el-button type="primary" size="small">新增权限</el-button>
        </div>
      </template>
      
      <el-table :data="permissionList" row-key="id" :tree-props="{ children: 'children' }" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="权限名称" width="180" />
        <el-table-column prop="code" label="权限编码" width="180" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.type)">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default>
            <el-button size="small" type="primary" link>编辑</el-button>
            <el-button size="small" type="danger" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const loading = ref(false)

// 模拟权限数据（树形结构）
const permissionList = ref([
  {
    id: 1,
    name: '系统管理',
    code: 'system',
    type: '菜单',
    path: '/system',
    status: '启用',
    children: [
      {
        id: 11,
        name: '用户管理',
        code: 'system:user',
        type: '菜单',
        path: '/system/users',
        status: '启用',
        children: [
          {
            id: 111,
            name: '用户查询',
            code: 'system:user:list',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 112,
            name: '用户新增',
            code: 'system:user:add',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 113,
            name: '用户编辑',
            code: 'system:user:edit',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 114,
            name: '用户删除',
            code: 'system:user:delete',
            type: '按钮',
            path: '',
            status: '启用'
          }
        ]
      },
      {
        id: 12,
        name: '角色管理',
        code: 'system:role',
        type: '菜单',
        path: '/system/roles',
        status: '启用',
        children: [
          {
            id: 121,
            name: '角色查询',
            code: 'system:role:list',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 122,
            name: '角色新增',
            code: 'system:role:add',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 123,
            name: '角色编辑',
            code: 'system:role:edit',
            type: '按钮',
            path: '',
            status: '启用'
          },
          {
            id: 124,
            name: '角色删除',
            code: 'system:role:delete',
            type: '按钮',
            path: '',
            status: '启用'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '内容管理',
    code: 'content',
    type: '菜单',
    path: '/content',
    status: '启用',
    children: [
      {
        id: 21,
        name: '文章管理',
        code: 'content:article',
        type: '菜单',
        path: '/content/articles',
        status: '启用'
      },
      {
        id: 22,
        name: '分类管理',
        code: 'content:category',
        type: '菜单',
        path: '/content/categories',
        status: '禁用'
      }
    ]
  }
])

// 根据权限类型获取标签类型
const getTagType = (type: string) => {
  switch (type) {
    case '菜单':
      return 'primary'
    case '按钮':
      return 'success'
    case '接口':
      return 'warning'
    default:
      return 'info'
  }
}

// 模拟加载数据
const loadData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.permissions-container {
  padding: var(--content-padding);
}

.permissions-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style> 